<template>
  <div>
    <Card shadow>
      <Form
        ref="searchForm"
        :model="pageParams"
        inline
        :label-width="80">
        <FormItem label="路由名称" prop="policyName">
          <Input type="text" v-model="pageParams.routeName" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch(1)">查询</Button>&nbsp;
        </FormItem>
      </Form>
      <div class="table-operator">
        <ButtonGroup>
          <Button
            :disabled="$auth('gatewayRouteEdit')?false:true"
            class="search-btn"
            type="primary"
            @click="handleModal()">
            <span>新增</span>
          </Button>
        </ButtonGroup>
      </div>
      <Alert show-icon>谨慎新增或修改路由,如果修改不当,将影响正常访问！<span style="margin-left: 5px"></span><a @click="handleRefreshGateway">手动刷新网关</a>
      </Alert>
      <s-table :url="$apis.routes.page" :columns="columns" :params="pageParams" ref="table">
        <template slot="status" slot-scope="{ row }">
          <Badge v-if="row.status===1" status="success" text="正常"/>
          <Badge v-else="" status="error" text="禁用"/>
        </template>
        <template slot="routeType" slot-scope="{ row }">
          <span v-if="row.serviceId?true:false"><Tag color="green">负载均衡</Tag>{{ row.serviceId }}</span>
          <span v-else-if="row.url?true:false"><Tag color="blue">反向代理</Tag>{{ row.url }}</span>
        </template>

        <template slot="action" slot-scope="{ row }">
          <Button
            size="small"
            type="text"
            :disabled="$auth('gatewayRouteEdit')?false:true"
            @click="handleModal(row)">
            编辑</Button>
          <Button
            size="small"
            type="text"
            :disabled="$auth('gatewayRouteEdit')?false:true"
            @click="handleRemove(row)">
            删除</Button>
        </template>
      </s-table>
    </Card>
    <route-modal ref="routeModal" @reloadTable="handleSearch"></route-modal>
  </div>
</template>

<script>
import RouteModal from './modal'

export default {
  name: 'GatewayRoute',
  components: { RouteModal },
  data () {
    return {
      pageParams: {
        routeName: ''
      },
      columns: [
        {
          title: '路由名称',
          key: 'routeDesc',
          width: 300
        },
        {
          title: '路由编码',
          key: 'routeName',
          width: 300

        },
        {
          title: '路由前缀',
          key: 'path',
          width: 200
        },
        {
          title: '路由方式',
          slot: 'routeType',
          width: 300
        },
        {
          title: '忽略前缀',
          key: 'stripPrefix'
        },
        {
          title: '失败重试',
          key: 'retryable'
        },
        {
          title: '状态',
          key: 'status',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 150
        }
      ],
      data: []
    }
  },
  methods: {
    handleModal (data) {
      this.$refs['routeModal'].handleShow(data)
    },
    handleSearch () {
      this.$refs['table'].search()
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.routes.remove, { routeId: data.routeId }, this).then(res => {
        this.handleSearch()
      })
    },
    handleRefreshGateway () {
      this.$http.confirm(this.$apis.gateway.refresh, {}, { content: '将重新加载所有网关实例包括（访问权限、流量限制、IP访问限制、路由缓存），是否继续？' }, this)
        .then(res => {
          if (res.code === 0) {
            this.$Message.success('刷新成功')
          }
        })
    }
  },
  mounted: function () {
    this.handleSearch()
  }
}
</script>
